/**
 * 学习目标： JSX 语法糖：  对象    数组
 *   1. 如果要打印对象，对象需要转换成字符串(一般是访问对象的值)
 *   2. 数组在 JSX 就是列表渲染
 *   3. 数组列表在渲染时候需指定 key 属性(React通过 key={xxx} 指定，Vue通过 :key="xxx"指定)
 *
 *  总结：
 *    JSX 的插值表达式更加灵活，能实现：内容绑定，属性绑定，条件渲染，列表渲染
 */

import React from 'react'
import ReactDOM from 'react-dom'

const obj = {
  name: 'zs',
  age: 18,
}

const fruits = ['香蕉', '橘子', '苹果']

const arr = [1, 2, 3, 4]
const arr2 = [<h3>标题3</h3>, <h4>标题4</h4>, <h5>标题5</h5>]

const containerNode = (
  <>
    <h1>打印对象：</h1>
    <h2>JSX中对象无法直接显示，需转换成字符串：{JSON.stringify(obj)}</h2>
    <h3>显示对象的某个值：{obj.name}</h3>
    <h4>{fruits}</h4>
    <h2>🔔JSX数组就是列表渲染：{arr}</h2>
    <div>{arr2}</div>
    <h1>列表渲染(数组内存JSX)：</h1>
    <ul>
      {fruits.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  </>
)

ReactDOM.render(containerNode, document.getElementById('root'))
